<template>
    <div class="list-detail">
        <div class="con">
            <search v-model="keywords" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </search>
            <pullRefresh v-model="refreshing" @refresh="reload">
                <van-list v-model="loading" :finished="finished" @load="load" finished-text="以上就是全部啦~">
                    <div v-for="cell in list" :key="cell.id" class="cell">
                        <slot :data="cell"></slot>
                    </div>
                </van-list>
            </pullRefresh>
        </div>
    </div>
</template>

<script>
import { PullRefresh, Search } from "vant";

export default {
    components: { PullRefresh, Search },

    // inject: ['a','b'],

    data() {
        return {
            keywords: "",
            list: [],

            refreshing: false, // 下拉刷新标记
            loading: false,
            finished: false
        };
    },

    mounted() {
        // this.onLoad();
    },

    methods: {
        onSearch() { },

        reload() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            this.loading = true; // 将 loading 设置为 true，表示处于加载状态
            this.load();
        },

        // 获取账单列表
        load() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                this.list = this.list.concat(this.mockData());
                // 加载状态结束
                this.loading = false;
                // 数据全部加载完成
                if (this.list.length >= 10) {
                    this.finished = true;
                }
            }, 1000);
        },

        mockData() {
            let _arr = [];
            for (let i = 0; i < 10; i++) {
                let cell = {
                    id: i + 1,
                    name: "张三",
                    mobilePhone: i + 17521017110
                };
                _arr.push(cell);
            }
            return _arr;
        }
    }
};
</script>

<style lang="scss" scoped>
.list-detail {
    width: 100%;

    .con {
        padding-bottom: 90px;

        .cell {
            border-bottom: 1px solid #f3f3f3;
        }
    }
}
</style>